import React, { useEffect, useState } from 'react'
import { useParams } from 'umi'
import HomeHeard from '../detail/component/HomeHeard/HomeHeard'
import { fetchItemDetail } from '@a/home'
import { Swiper } from 'antd-mobile'
import Foot from '../detail/component/Foot/index'
import '../detail/style.scss'
export default function index() {
  const itemId = useParams().id
  const [item,setItem] = useState({
    basicInfo: {},
    content: '',
    pics: []
  })
  // 弹出框内容
  const [mink, setMink] = useState({})
  // 商品详情
  const getItemDetail = () => {
    fetchItemDetail({id:itemId}).then(res => {     
      if (res.data.code === 0) {
        setItem({
          basicInfo: res.data.data.basicInfo,
          content: res.data.data.content,
          pics: res.data.data.pics
        })
        setMink({
          ...res.data.data.basicInfo,
          number: 1
        })
      }
    })    
  }
  useEffect(() => {
    getItemDetail()
  },[])
  return (
    <div>
      <HomeHeard/>
      <div className="detail-main">
        <Swiper loop autoplay>
          {
            item.pics.map(pic => {
              return (
                <Swiper.Item key={pic.id}>
                <img src={pic.pic} alt="" />
                </Swiper.Item>
              )
            })
          }
        </Swiper>
        <p>{item.basicInfo.name}</p>
        <div dangerouslySetInnerHTML={{__html:item.content}}></div>
      </div>
      <Foot mink={mink} setMink={setMink}/>
    </div>
  )
}
